<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: #c1c1c1;
        }
        
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .box {
            width: 800px;
            height: 450px;
            background-color: #fff;
            margin: auto;
        }
        
        .box_top_left {
            width: 800px;
            height: 60px;
            /* background-color: red; */
            border: 1px solid black;
        }
        
        ul {
            width: 700px;
            height: 60px;
            /* background-color: blueviolet; */
            float: left;
        }
        
        ul li {
            width: 80px;
            height: 55px;
            border: 1px solid black;
            text-align: center;
            line-height: 60px;
            float: left;
        }
        
        .box_top_right {
            width: 100px;
            height: 60px;
            /* background-color: aquamarine; */
            float: right;
        }
        
        .box_top_right span {
            font-size: 30px;
            line-height: 60px;
            margin-left: 40px;
        }
        
        .box_x {
            width: 800px;
            height: 390px;
            /* background-color: darksalmon; */
        }
        
        .box_x section {
            display: none;
        }
        
        .box_x .nr1 {
            display: block;
        }
        
        .lis1 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box" id="tab">
        <nav class="box_top_left">
            <ul>
                <li class="lis1"><span>测试一</span><span class="lis2">x</span></li>
                <li><span>测试二</span><span class="lis2">x</span></li>
                <li><span>测试三</span><span class="lis2">x</span></li>
            </ul>

            <div class="box_top_right">
                <span class="add">+</span>
            </div>
        </nav>
        <div class="box_x">
            <section class="nr1">测试一</section>
            <section>测试二</section>
            <section>测试三</section>
        </div>
    </div>
</body>
<script src="./tab.js"></script>

</html>